<script setup>
import TopButton from "@/components/Pengyq/TopButton.vue";
import bottomBtn from "@/components/Pengyq/bottomBtn.vue";
import { onMounted, ref, computed } from "vue";
import { getOrderDetailAPI } from "@/server/api/itemOrders";
import { getShopOrderDetail } from "@/server/api/shopApi";
import { ItemShopStore } from "@/stores/ItemAnShop";
import { useRoute, useRouter } from "vue-router";
import { useUseStore } from "@/stores/user";
import { formatSpecification } from "@/utils/formatSpecFun"
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const route = useRoute();
const router = useRouter();

let allOrders = ref({});
let orderType = ref(); // 订单类型

const shopOrderDetail = ref(null)
const shopOrderDetailInfo = ref([])
const orderId = ref()
const createTime = ref()

// 获取item订单详情数据
const getOrderDetail = async (id) => {
  const { data } = await getOrderDetailAPI(id);
  allOrders.value = {
    ...data.data,
    ...ItemShopStore().shopOrderInfo,
  };
  // allOrders.value.avatarImag = useStore.ing + allOrders.value.avatarImag;
  // allOrders.value.userImage = useStore.ing + allOrders.value.userImage;

  console.log("订单详情", allOrders.value);
};


// 跳转商品详情
const goDetails = (id) => {
  console.log(id);
  if (orderType.value == "item") {
    router.push({
      path: "/details",
      query: {
        id,
      },
    });
  }
};

//定义支付函数
const Payment = () => {
  console.log("支付中");

  router.push({
    path: "/payItem",
    query: {
      price: totalPayable.value,
      orderId: shopOrderDetail.value.orderId,
      commodityId: shopOrderDetail.value.shopId,
      number: shopOrderDetailInfo.value
    },
  });
};

onMounted(() => {
  console.log(route.query.type)
  orderType.value = ItemShopStore().IdtStatus;
  if (orderType.value == "item") {
    shopOrderDetail.value = JSON.parse(route.query.shopOrderDetail);
    shopOrderDetailInfo.value = shopOrderDetail.value.shopOrderDetail
    console.log(shopOrderDetail.value, "1111")
    // getOrderDetail(shopOrderDetail.value.orderId)
    console.log(shopOrderDetailInfo.value, "222")
    console.log(shopOrderDetailInfo.value[0].commoditySpecification, "333")
  }
});

const totalPayable = computed(() => {
  return shopOrderDetailInfo.value.reduce((total, item) => {
    return total + (item.price || 0); // 只计算 price 字段
  }, 0);
});


const onClickLeft = () => {
  router.back();
}

const goShopInfo = (shopId) => {
  router.push({
    path: "/publisher",
    query: {
      itemId: shopId
    },
  });
}

</script>

<template>
  <!-- <TopButton :title="$t('item.details.detail')" /> -->
  <van-nav-bar :title="$t('item.details.detail')" left-text="返回" left-arrow @click-left="onClickLeft"
    safe-area-inset-top="true" />

  <main>
    <div class="detail" v-if="shopOrderDetail !== null">
      <div class="list_hd">
        <div class="login">
          <!-- <img :src="allOrders.userImage" alt="" /> -->
        </div>


      </div>
      <div class="box box_show">
        <div class="text_right" @click="goShopInfo(shopOrderDetail.shopId)">
          {{ shopOrderDetail.shopName }}
        </div>
        <div class="list_ad" v-for="item in shopOrderDetailInfo" @click="goDetails(item.commodityId)">
          <div class="imgs">
            <img :src="item.avatarImg" />
          </div>
          <div class="title ellipsis-2" v-if="orderType == 'item'">
            <div>{{ item.commodityName }}</div>
            <div v-if="item.commoditySpecification">
              <div>{{ formatSpecification(item.commoditySpecification) }}</div>
            </div>
          </div>
          <div> X {{ item.number }}</div>
          <div class="introduce">
            <div class="price" v-if="item.price">
              {{ item.price }}
              <i>{{ item.price ? "eCNY" : "Pi" }}</i>
            </div>
            <div class="price" v-else>
              {{ item.piPrice }}
              <i>{{ item.piPrice ? "Pi" : "eCNY" }}</i>
            </div>

          </div>


        </div>
      </div>

      <div class="card info">
        <div class="item">{{ $t("order.way") }}: eCNY</div>
        <div class="item">
          {{ $t("order.payOrder") }}: {{ shopOrderDetail.orderId }}
        </div>
        <div class="item">
          {{ $t("order.time") }}:{{ new Date(shopOrderDetail.createTime).toLocaleString() }}
        </div>
        <div class="bottom_button"> 应付：{{ shopOrderDetail.transactionAmount }} eCNY</div>
      </div>

      <div v-if="!route.query.type">
        <div class="pany" v-if="shopOrderDetail.orderStatus == 0" @click.stop="Payment()">
          <bottomBtn :title="$t('order.pay')" />
        </div>

      </div>

    </div>


  </main>
</template>

<style lang="scss" scoped>
main {
  font-size: 14rem;
  background-color: #f5f5f5;
  height: 100vh;
  box-sizing: border-box;

  .detail {
    // padding-top: 70rem;
    padding: 10rem;

    .card {
      // margin: 20rem;
      // // margin-bottom: 20rem;
      // padding: 10rem;


      .title {
        font-weight: 500;
        color: #000;
        font-size: 16rem;
        margin-bottom: 30rem;
      }

      .timer {
        font-size: 14rem;
        color: #a6a6a6;
      }
    }

    .box {
      padding: 10rem;
      margin-top: 10rem;
      background-color: #fff;

      .list_hd {
        display: flex;
        justify-content: space-between;
        height: 20rem;
        padding: 10rem 0;

        .login {
          width: 75rem;
          height: 75rem;
          color: #000000;
          font-weight: 500;
          font-size: 16rem;

          img {
            margin-right: 10rem;
            width: 30rem;
            height: 30rem;
            object-fit: cover;
            border-radius: 50%;
            vertical-align: middle;
            border-radius: 50%;
            overflow: hidden;
          }
        }

        .text_right {
          color: #642e8e;
          font-size: 16rem;
        }
      }

      .list_ad {
        display: flex;
        justify-content: space-between;
        margin-top: 5rem;

        .imgs {
          width: 20%;
          width: 50rem;
          border-radius: 5rem;
          height: 50rem;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .title {
          margin-left: 20rem;
          width: 140rem;
          height: 56rem;
          font-size: 14rem;
          line-height: 26rem;
        }

        .title div {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 100%;
          display: block;
        }

        .introduce {
          display: flex;
          flex-direction: column;
          padding-left: 20rem;

          .price {
            margin-left: auto;
            margin-bottom: 20rem;
            font-size: 16rem;
            font-weight: 600;
            color: rgb(0, 0, 0);

            >i {
              color: #000000;
              font-size: 12rem;
            }
          }

          .bottom_button {
            margin-left: auto;
            display: flex;

            .btn {
              margin-left: 10rem;
              font-size: 12rem;
              width: 120rem;
              height: 30rem;
              line-height: 30rem;
              text-align: center;
              border-radius: 20rem;
              background-color: #ffffff;
              color: #fff;
            }
          }
        }
      }
    }

    .info {
      margin: 0;
      margin-top: 10rem;
      border-radius: 0;
      padding: 10rem;
      font-size: 14rem;
      color: #333333;
      line-height: 25rem;
    }
  }
}
</style>
